<template>
  <el-form label-width="80px">
    <div v-for="(item,index) in paymentDataList" :key="item.value">
    <el-row class="row-style" :class="{isMember: (item.method == '2' && cardType == '0')}">
			<!-- 付款类型 -->
      <el-col :span="4">
        <div class="button-container">
          <el-button type="success" size="mini" icon="el-icon-circle-plus" v-if="item.button &&  item.method != '2'" @click="item.button = false">{{item.name}}</el-button>
          <el-button type="success" size="mini" icon="el-icon-circle-plus" v-if="item.button && item.method == '2' && cardType == '1'" @click="item.button = false">{{item.name}}</el-button>
          <span v-if="!item.button && item.method != '2'">{{item.name}}</span>
          <span v-if="!item.button && item.method == '2' && cardType == '1'">{{item.name}}</span>
        </div>
      </el-col>

      <!-- 付款金额 -->
      <el-col :span="8">
        <el-input v-if="!item.button && item.method != '1' && item.method != '2' && item.method != '3' && item.method != '5'" v-model="item.cost" @input="costChange($event,item.method)"></el-input>
        <el-input v-if="!item.button && item.method == '1'" v-model="item.cost" @input="costChange($event,item.method)">
          <el-select v-model="item.cashType" slot="prepend" placeholder="请选择" @change="cashTypeChangeHandle">
            <el-option v-for="(item,index) in cashTypeOption" :label="item.label" :value="item.value" :key="index"></el-option>
          </el-select>
        </el-input>
        <el-input v-if="!item.button && item.method == '3'" v-model="item.cost" @input="costChange($event,item.method)" @focus="getStoredCard"></el-input>
        <el-input v-if="!item.button && item.method == '2' && cardType == '1'" v-model="item.cost" @input="costChange($event,item.method)"></el-input>
        <el-row v-if="!item.button && item.method == '5'" :gutter="10">
          <el-col :span="12">
            <el-input v-model="item.cost" @input="costChange($event,item.method)" @focus="getVouchers"></el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="item.vouchersNum" readonly></el-input>
          </el-col>
        </el-row>

      </el-col>

      <!-- 删除按钮&说明文字 -->
      <el-col :span="4">
        <div class="button-container" v-if="!item.button">
          <el-button v-if="item.method != '2'" type="danger" size="mini" icon="el-icon-delete" @click="deleteTypeHandle(item.method,item.cost,index)">删除</el-button>
          <el-button v-if="item.method == '2' && cardType == '1'" type="danger" size="mini" icon="el-icon-delete" @click="deleteTypeHandle(item.method,item.cost,index)">删除</el-button>
          <el-button v-if="item.method == '2' && cardType == '1'" type="info" icon="el-icon-view" @click="checkRule"></el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div v-if="item.method == '1' && !item.button && index == 0">
          <el-button type="primary" icon="el-icon-plus" @click="addTypeHandle">添加</el-button>
        </div>
        <div style="color: red;" v-if="item.method == '2' && !item.button && cardType == '1'">
          1积分 = 1.00元现金 <span v-if="show">/ 客户剩余积分 {{integralBalance}}</span><span v-if="show2">/ 家庭组总积分 {{integralBalanceSum}}</span>
          <span> | 本订单最高可用积分{{integralDeductionTotal}}</span>
        </div>
        <div style="color: red;" v-if="item.method == '6' && !item.button && cardType == '1'">
          <span v-if="show">客户当前预付款 {{advancePayment}} 元</span>
        </div>
        <div style="color: red;" v-if="item.method == '8' && !item.button && cardType == '1'">
          <span v-if="show">客户当前余额 {{moneyBalance}} 元</span>
        </div>
      </el-col>
    </el-row>
    </div>
    <stored-card v-if="storedVisible" ref="storedDialog" @refreshData="getStoredValue"></stored-card>
    <vouchers-card v-if="vouchersVisible" ref="vouchersDialog" @refreshData="getVouchersValue" :saleType="saleType"></vouchers-card>
    <integral-rule v-if="ruleVisible" ref="ruleDialog"></integral-rule>
  </el-form>

</template>

<script>
  import StoredCard from './PaymentStored'
  import VouchersCard from './PaymentVouchers'
  import IntegralRule from './IntegralRule'

  export default {
    props:['cardType','saleType','paymentDataList','visibleData','integralBalance','integralBalanceSum','integralDeductionTotal','show','show2','paidPrice','advancePayment','moneyBalance'],
    data() {
      return {
        payValue: '',
        cashType: '1',
        storedVisible: false,
        vouchersVisible: false,
        ruleVisible: false,
        cashTypeOption: [
          {label: '现金',value:'1'},
          {label: 'POS机',value:'2'},
          // {label: '二维码',value:'3'},
          // {label: '美团',value:'6'},
          {label: '员工卡',value:'7'},
        ]
      }
    },
    components: {
      StoredCard,
      VouchersCard,
      IntegralRule
    },
    created(){
      // console.log(this.paymentDataList)
    },
    methods:{
      // 添加现金付款方式
      addTypeHandle(){
        let sum = 1
        this.paymentDataList.forEach(item => {
          if(item.method == 1){
            sum += 1
          }
        })
        if(sum <= 4){
          let obj = {method: '1', name: '现金',button: false, cost: '',cashType: '1'}
          this.paymentDataList.splice(1,0,obj)
        }
      },
      deleteTypeHandle(name,cost,index) {
        if(this.paymentDataList[index].method == '5'){
          this.paymentDataList[index].vouchersNum = ''
        }
        this.paymentDataList[index].button = true
        this.paymentDataList[index].cost = ''
        this.costChange('',name)
        // this.paymentDataList.forEach(item => {
        //   if(item.method == name){
        //     if(item.method == '5'){
        //       item.vouchersNum = ''
        //     }
        //     item.button = true
        //     item.cost = ''
        //   }
        //   this.costChange('',name)
        // })
      },
      cashTypeChangeHandle(val){
        let list = JSON.parse(JSON.stringify(this.paymentDataList))
        let sum = 0;
        for(let i = 0; i < list.length - 1;i++){
          if(list[i].cashType == val){
            sum += 1
          }
        }
        if(sum > 1){
          this.$message.warning('同一种付款方式只能使用一次')
          return false
        }
      },
      costChange(val,method) {
        if(method == '2' && val > this.integralDeductionTotal){
          // this.paymentDataList[1].cost = ''
          this.$message.warning('积分超出最高可使用额度')
          return false
        }
        if(method == '2' || method == '3' || method == '4' || method == '5' || method == '6' || method == '8'){
					this.paymentDataList[0].button = false
          this.paymentDataList[0].cost = (((this.paidPrice)*10000 - (this.paymentDataList[1].cost)*10000 -(this.paymentDataList[2].cost)*10000-(this.paymentDataList[3].cost)*10000 - (this.paymentDataList[4].cost)*10000 - (this.paymentDataList[5].cost)*10000 - (this.paymentDataList[6].cost)*10000)/10000).toFixed(2)
        }
        let sum = 0
        this.paymentDataList.forEach(item => {
          sum += item.cost*10000/10000
        })
        this.$emit('refreshFormData',sum.toFixed(2))
      },
      getStoredCard() {
        this.storedVisible = true
        this.$nextTick(() => {
          this.$refs.storedDialog.init()
        })
      },
      getVouchers() {
        this.vouchersVisible = true
        this.$nextTick(() => {
          this.$refs.vouchersDialog.init()
        })
      },
      //  获取储值卡缴费金额
      getStoredValue(data) {
        this.paymentDataList[2].cost = (data.payAmount*1).toFixed(2)
        this.paymentDataList[2].cardNum = data.cardNum
        this.costChange('','3')
      },
      //  获取代金券缴费金额
      getVouchersValue(data) {
        this.paymentDataList[4].cost = (data.payAmount*1).toFixed(2)
        this.paymentDataList[4].vouchersNum = data.cardNum
        this.costChange('','5')
      },
      // 查看积分规则
      checkRule(){
        this.ruleVisible = true
        this.$nextTick(() => {
          this.$refs.ruleDialog.init()
        })
      }
    }
  }

</script>

<style lang="scss" scoped>
  .row-style {
    padding: 5px 10px;
    background-color: #ecf5ff;
    margin-bottom: 5px;
  }
  .button-container{
    text-align: center;
    line-height: 30px;
  }
  .isMember {
    padding: 0;
    margin-bottom: 0;
    .el-col {
      margin-bottom: 0!important;
    }
  }
  /deep/ .el-input-group__append, /deep/ .el-input-group__prepend {
    width: 80px;
  }
</style>
